<template>
  <div class="createPurchasePrice" @click.stop="aotuTab=false">
    <div class="header">
      <el-button
        v-if="copys === 0"
        size="mini"
        type="primary"
        @click="preservation"
      >
        {{ $t('btn.save') }}
      </el-button>
      <el-button
        v-if="copys !== 0"
        size="mini"
        type="primary"
        @click="copyPurPrice"
      >
        {{ $t('btn.save') }}
      </el-button>
      <span
        v-if="copys !== 0"
        style="margin-left:10px;font-size: 12px;color: red; "
      >
        {{ $t('market.atPresent') }}<!--  当前为复制价目状态，不能新增物料价目，请提交后修改。-->
      </span>
    </div>
    <el-form
      ref="purchaseRef"
      :model="purchaseForm"
      label-width="90px"
      size="mini"
      :rules="purchaseRules"
    >
      <el-form-item :label="$t('market.supplier')" prop="fsupplierId">
        <el-autocomplete
          v-model.trim="purchaseForm.fsupplierName"
          highlight-first-item
          popper-class="my-autocomplete"
          :fetch-suggestions="querySearch9"
          size="mini"
          class="input-width"
          @focus="handleSupplier"
          @select="supplierSelectRow"
        >
          <i
            slot="suffix"
            class="el-input__icon el-icon-search"
            @click="openSupplier = true"
          />
          <template slot-scope="{ item }">
            <div class="name">{{ item.fname }}</div>
          </template>
        </el-autocomplete>
      </el-form-item>
      <el-form-item :label="$t('shop.name1')" prop="fname">
        <el-input v-model="purchaseForm.fname" class="input-width" />
      </el-form-item>
      <el-form-item :label="$t('market.currency2')" prop="fcurrencyId">
        <el-autocomplete
          v-model.trim="purchaseForm.fcurrencyFname"
          highlight-first-item
          popper-class="my-autocomplete"
          :fetch-suggestions="querySearch5"
          size="mini"
          class="input-width"
          @focus="queryTBdCurrency"
          @select="currencySelectRow"
        >
          <i
            slot="suffix"
            class="el-input__icon el-icon-search"
            @click="openCurrency = true"
          />
          <template slot-scope="{ item }">
            <div class="name">{{ item.fname }}</div>
          </template>
        </el-autocomplete>
      </el-form-item>
      <el-form-item :label="$t('market.supplierRate')" prop="fpaezBase">
        <el-input
          v-model.trim="purchaseForm.fpaezBaseName"
          size="mini"
          disabled
          class="input-width"
        />
      </el-form-item>
      <el-form-item v-if="copys !== 0" :label="$t('market.copyPricename')">
        <el-input v-model="copyName" class="input-width" disabled>
          <i
            slot="suffix"
            style="color: red"
            class="el-icon-circle-close el-input__icon"
            @click="delCopys"
          />
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('market.pricetype')" prop="fpriceType">
        <el-select
          v-model="purchaseForm.fpriceType"
          class="input-width"
          :disabled="fpriceTypeId ? true : false"
        >
          <el-option
            v-for="option in purchaseForm.priceTypeList"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('market.tax')" prop="fisIncludedTax">
        <el-checkbox
          v-model="purchaseForm.fisIncludedTax"
          class="input-width"
          @change="handleTax"
        />
      </el-form-item>
      <el-form-item :label="$t('market.note')" prop="fnote">
        <el-input
          v-model="purchaseForm.fnote"
          class="input-width"
        />
      </el-form-item>
    </el-form>
    <div style="margin-top: 10px;">
      <el-button size="mini" @click="newHang">{{ $t('btn.newHang') }}<!--新增行--></el-button>
      <el-button size="mini" @click="delHang">{{ $t('btn.delHang') }}<!--删除行--></el-button>
      <el-button
        size="mini"
        @click="batchFill"
      >{{ $t('btn.batchFill') }}<!--批量填充--></el-button>
    </div>
    <div style="margin-top: 5px;">
      <jc-table
        :table-data="tableData"
        :table-header="tableHeader"
        :table-height="tableHeight"
        serial
        @rowClick="rowClick"
        @cellClick="cellClick"
      >
        <el-table-column
          :label="$t('market.fmaterial')"
          prop="materielCode"
          align="center"
          width="170px"
        >
          <template slot-scope="scope">
            <el-input
              v-model.trim="scope.row.materielCode"
              size="mini"
              :disabled="copys !== 0"
              @input="getAtuo(scope.$index, scope.row.materielCode)"
            >
              <i
                slot="prefix"
                class="iconfont icon-jin-rud-ao-bo"
                @click="sonJumpMateriel(scope.row.fmaterialId)"
              />
              <i
                v-if="copys === 0"
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="handleGetMateriel(scope.row, scope.$index)"
              />
            </el-input>
            <div v-if="aotuTab && tableIndex === scope.$index" :class="tableIndex<7 ? 'tabPosit': 'tabPosit1'">
              <number-code :fnumber="fnumber1" @material="materielSelectRow" />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('shop.fname2')"
          prop="fname"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column :label="$t('market.fmodel')" prop="fmodel" align="center" :show-overflow-tooltip="true" />
        <el-table-column :label="$t('shop.fspecificaTion')" prop="fspecificaTion" align="center" :show-overflow-tooltip="true" />
        <el-table-column
          :label="$t('market.fdescripTion')"
          prop="fdescripTion"
          align="center"
          min-width="200px"
          :show-overflow-tooltip="true"
        />
        <el-table-column :label="$t('market.chargeunit')" prop="fpurchasepriceUnit" align="center" />
        <el-table-column
          :label="$t('market.fprice')"
          prop="fprice"
          align="center"
        >
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.fprice"
              size="mini"
              :disabled="fpriceDisabled || copys !== 0"
              :precision="4"
              :step="0.0001"
              :min="0.0"
              @change="handleUnitPrice(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('market.ftaxPrice')"
          prop="ftaxPrice"
          align="center"
        >
          <template slot-scope="scope">
            <el-input-number
              v-model.number="scope.row.ftaxPrice"
              size="mini"
              :disabled="ftaxPriceDisabled || copys !== 0"
              :precision="4"
              :step="0.0001"
              :min="0.0"
              @change="handleTaxIncluded(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('market.minNum')"
          prop="fminNum"
          align="center"
        >
          <template slot-scope="scope">
            <el-input-number
              v-model.number="scope.row.fminNum"
              size="mini"
              :disabled="copys !== 0"
              :precision="4"
              :step="0.0001"
              :min="0.0"
            />
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('market.effectiveDate')"
          prop="feffectiveDate"
          align="center"
          min-width="120px"
        >
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.feffectiveDate"
              size="mini"
              :disabled="copys !== 0"
              type="date"
              style="width: 150px"
              value-format="yyyy-MM-dd"
            />
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('market.expiryDate')"
          prop="fexpiryDate"
          align="center"
          min-width="120px"
        >
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.fexpiryDate"
              size="mini"
              :disabled="copys !== 0"
              type="date"
              style="width: 150px"
              value-format="yyyy-MM-dd"
            />
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('market.ftaxRate')"
          prop="ftaxRate"
          align="center"
        >
        <!--          <template slot-scope="scope">-->
        <!--            <el-input-number-->
        <!--              v-model.number="scope.row.ftaxRate"-->
        <!--              size="mini"-->
        <!--              :min="0"-->
        <!--              @change="handleTaxRate(scope.row)"-->
        <!--            />-->
        <!--          </template>-->
        </el-table-column>
        <template v-slot:text2Slot="col">
          <el-input v-model="col.scope.row.fnote" size="mini" />
        </template>
        <template v-slot:btnSlot="clo">
          <el-button
            type="danger"
            size="mini"
            @click="handleDelete(clo.scope.row, clo.scope.$index)"
          >
            {{ $t('btn.del') }}
          </el-button>
        </template>
      </jc-table>
    </div>
    <!--币别-->
    <currency v-if="openCurrency" @currency="currencySelectRow" />
    <!--    物料弹窗-->
    <material v-if="openMaterialDialog" @material="materielSelectRow" />
    <!--供应商-->
    <supplier v-if="openSupplier" @supplier="supplierSelectRow" />
  </div>
</template>
<script>
import {
  insertPurPrice,
  insertCopyPurPrice
} from '@/api/purchaseManagement/createPurchasePrice'
import jumpMateriel from '@/components/JumpMateriel'
import searData from '@/components/Search/mixin'
import { maxDecimal } from '@/utils/number'
import { queryViewItem } from '@/api/marketManage/marketOrder'
import autocomplete from '@/views/market/marketManage/createMarkerOrder/components/autocomplete'

export default {
  name: 'CreatePurchasePrice',
  components: {
    currency: () => import('@/views/market/marketManage/createMarkerOrder/components/currency'),
    material: () => import('@/views/market/marketManage/createMarkerOrder/components/material'),
    supplier: () => import('@/views/purchasing/purchase/treePurchasePrice/component/supplier'),
    numberCode: () => import('@/components/NumberCode')
  },
  mixins: [jumpMateriel, searData, autocomplete],
  props: {
    msg: {
      type: Object,
      default: function() {
        return {}
      }
    },
    gys: {
      type: Object,
      default: function() {
        return {}
      }
    },
    fpriceTypeId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      funit: 'SX_V_UNIT_TAXRATEID',
      copys: 0, // 价目表id
      copyName: '', // 价目表id
      ftype: 0,
      fbillNo: 'fnumber', // 编码
      activeName: 'purchase', // 默认在价目
      aotuTab: false,
      tableHeight: '72vh',
      fnumber1: '',
      tableData: [
        {
          materielCode: '', // 物料编码
          fprice: 0, // 单价
          ftaxPrice: 0, // 含税单价
          fminNum: 1, // 最小起订量
          fupPrice: 0, // 价格上限
          fdownPrice: 0, // 价格下限
          feffectiveDate: new Date(), // 生效时间
          fexpiryDate: '2100-01-01', // 失效时间
          ftaxRate: 0, // 税率
          fdescripTion: '', // 描述
          fmaterialId: '' // 传递给后端的id
        }
      ], // 价目价目表
      tableHeader: [
        { label: this.$t('market.topPrice'), prop: 'fupPrice' },
        { label: this.$t('market.downPrice'), prop: 'fdownPrice' },
        { label: this.$t('market.note'), prop: 'fnote', type: 'text2', width: '120' },
        { label: this.$t('market.handle'), type: 'btn', minWidth: '100px', fixed: 'right' }
      ],
      openSupplier: false, // 供应商弹窗
      openCurrency: false, // 币别、价目表、价格类型
      openMaterialDialog: false, // 物料弹窗
      fpriceDisabled: true, // 单价禁用
      selectAll: [], // 全选的值
      ftaxPriceDisabled: false, // 含税单价禁用
      // 点击行的序号
      tableIndex: 0,
      selectTaxRate: '', // 供应商选中税率
      // 价目表头
      purchaseForm: {
        priceTypeList: [], // 价格类型
        fpriceType: 151, // 价格类型值
        fcurrencyId: '', // 币别id
        fpaezBase: '', // 供应商税率id
        fpaezBaseName: '', // 供应商税率
        fsupplierId: '', // 供应商
        fsupplierName: '', // 供应商名称
        fcurrencyFname: '', // 币别名称
        code: '', // 编码
        fname: '', // 名称
        fisIncludedTax: true, // 含税
        fnote: '' // 描述
      },
      purchaseRules: {
        fpriceType: [
          {
            required: true,
            message: '请至少选择一个价格类型',
            trigger: 'change'
          }
        ],
        fcurrencyId: [
          { required: true, message: '请输入币别', trigger: 'change' }
        ],
        fpaezBase: [
          { required: true, message: '请输入供应商税率', trigger: 'change' }
        ],
        fsupplierId: [
          { required: true, message: '请输入供应商', trigger: 'change' }
        ],
        fname: [{ required: true, message: '请输入名称', trigger: 'blur' }]
      }
    }
  },
  computed: {
    ftaxRate() {
      const RES = this.tableData.find(item => item.ftaxRate)
      return RES
    }
  },
  watch: {
    ftaxRate(newVal) {
      const { fprice, ftaxRate, ftaxPrice } = newVal
      if (!this.fpriceDisabled) {
        // 含税单价
        newVal.ftaxPrice = fprice * (1 + ftaxRate / 100)
        // 价格上限
        newVal.fupPrice = ftaxPrice
        // 价格下限
        newVal.fdownPrice = ftaxPrice
        // newVal.fupPrice = newVal.fupPrice.toFixed(4)
        // newVal.fdownPrice = newVal.fdownPrice.toFixed(4)
      } else {
        // 单价
        newVal.fprice = ftaxPrice / (1 + ftaxRate / 100)
        // 价格上限
        newVal.fupPrice = ftaxPrice
        // 价格下限
        newVal.fdownPrice = ftaxPrice
        // newVal.fupPrice = newVal.fupPrice.toFixed(4)
        // newVal.fdownPrice = newVal.fdownPrice.toFixed(4)
      }
    },
    msg() {
      this.copys = this.msg.id
      this.copyName = this.msg.fname
      if (this.copys !== 0) {
        this.purchaseForm.fsupplierId = 0
        this.purchaseForm.fsupplierName = ''
      }
    },
    gys(ev) {
      this.purchaseForm.fsupplierId = ev.fsupplierId
      this.purchaseForm.fsupplierName = ev.fsupplierName || ev.fname
    },
    fpriceTypeId(val) {
      this.purchaseForm.fpriceType = val
    }
  },
  created() {
    this.handleGetPriceType()
    if (this.$route.query.id) {
      this.detailPurchase()
    }
  },
  methods: {
    // 输入物料编码
    getAtuo(index, fnumber) {
      this.tableIndex = index
      this.aotuTab = true
      var vm = this
      clearTimeout(vm.timer) // 清除未执行的代码，重置回初始化状态
      vm.timer = setTimeout(() => {
        this.fnumber1 = fnumber
      }, 1000)
    },
    // 复制获取数据
    async detailPurchase() {
      this.copys = this.$route.query.id
      this.copyName = this.$route.query.fname
    },
    // 保存价目列表
    preservation() {
      this.$refs.purchaseRef.validate(valid => {
        if (!valid) return
        const materielId = this.tableData.findIndex(item => {
          return !item.fmaterialId || !item.fmaterialId
        })
        if (materielId !== -1 && this.tableData.length > 1) {
          this.tableData.splice(materielId, 1)
        }
        if (this.selectTaxRate !== 0) {
          for (const index in this.tableData) {
            const ITEM = this.tableData[index]
            if (
              !ITEM.fmaterialId ||
                ITEM.fprice === 0 ||
                ITEM.ftaxPrice === 0 ||
                ITEM.fminNum === 0 ||
                ITEM.ftaxRate === 0 ||
                ITEM.feffectiveDate == null
            ) {
              this.$message.warning(
                Number(index) + Number(1) + '行表格不能为空,或表格值不能为0'
              )
              return
            }
          }
        }
        const DETAILS = this.tableData.map(item => {
          const {
            fnote,
            fmaterialId,
            fprice,
            ftaxPrice,
            fminNum,
            fupPrice,
            fdownPrice,
            feffectiveDate,
            fexpiryDate,
            ftaxRate,
            fdescripTion,
            funitId
          } = item
          return {
            fnote,
            fmaterialId: fmaterialId,
            fprice,
            ftaxPrice,
            fminNum,
            fupPrice,
            fdownPrice,
            fentryEffectiveDate: feffectiveDate,
            fexpiryDate,
            ftaxRate,
            fdescripTion,
            funitId
          }
        })
        const {
          fname,
          fpriceType,
          fcurrencyId,
          fnote,
          fsupplierId,
          fisIncludedTax,
          fpaezBase,
          finstock
        } = this.purchaseForm
        const DATA = {
          fdocumentStatus: 'A',
          finstock,
          fname, // 名称
          fpriceType, // 价格类型
          fcurrencyId, // 币别
          fnote, // 描述
          fsupplierId, // 供应商id
          fisIncludedTax, // 是否含税
          fpaezBase, // 供应商税率
          details: DETAILS
        }
        insertPurPrice(DATA)
          .then(res => {
            if (res.code !== 0) {
              if (res.data == null) {
                this.$message({ showClose: true, message: res.message, type: 'success' })
                return
              }
              const fmateriAalId = this.tableData.findIndex(item => {
                return item.fmaterialId === res.data.fmateriAalId
              })
              this.$message.warning(`第${fmateriAalId + 1}行，${res.message}`)
              return
            }
            this.$message({ showClose: true, message: res.message, type: 'success' })
            if (this.msg.id) {
              this.$emit(
                'load',
                this.purchaseForm.fsupplierId,
                this.purchaseForm.fsupplierName
              )
            } else {
              this.$store.dispatch('tagsView/delView', this.$route).then(({ visitedViews }) => {
                if (this.$route.path) {
                  this.toLastView(visitedViews, this.$route)
                }
                // 关闭单个
                this.$store.dispatch('tagsView/guanbi', this.$route)
              })
              this.$router.push({ path: `/editPurchasePrice/${res.data}` })
            }
            this.refresh()
          })
          .catch(error => {
            this.$message.error(error)
          })
      })
    },
    // 复制价目表
    copyPurPrice() {
      this.$refs.purchaseRef.validate(valid => {
        if (!valid) return
        const materielId = this.tableData.findIndex(item => {
          return !item.fmaterialId || !item.fmaterialId
        })
        if (materielId !== -1 && this.tableData.length > 1) {
          this.tableData.splice(materielId, 1)
        }
        const {
          fname,
          fpriceType,
          fcurrencyId,
          fdescripTion,
          fsupplierId,
          fisIncludedTax,
          fpaezBase
        } = this.purchaseForm
        const DATA = {
          fname, // 名称
          fpriceType, // 价格类型
          fcurrencyId, // 币别
          fdescripTion, // 描述
          fsupplierId, // 供应商id
          fisIncludedTax, // 是否含税
          fpaezBase, // 供应商税率
          copyPurPricelistId: this.copys
        }
        insertCopyPurPrice(DATA).then(res => {
          if (res.code === 0) {
            this.copys = 0
            this.$message({ showClose: true, message: res.message, type: 'success' })
            this.$emit('fbid')
            this.refresh()
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error'
            })
          }
        })
      })
    },
    // 清除价目表id
    delCopys() {
      this.copys = 0
      this.$emit('fbid')
    },
    // 币别选中
    currencySelectRow(item) {
      if (item.fsettleCurrId || item.fcurrencyId) {
        this.purchaseForm.fcurrencyId = item.fsettleCurrId || item.fcurrencyId
        this.purchaseForm.fcurrencyFname = item.fsettleCurrIdName || item.fname
      }
      this.openCurrency = false
    },
    // 供应商选中
    supplierSelectRow(item) {
      const { fsupplierId, fname, ftaxrateName, ftaxrate, ftaxrateid } = item
      this.purchaseForm.fsupplierId = fsupplierId
      this.purchaseForm.fsupplierName = fname
      this.selectTaxRate = Number(ftaxrate)
      this.purchaseForm.fpaezBase = ftaxrateid
      this.purchaseForm.fpaezBaseName = ftaxrateName
      this.tableData.forEach(list => {
        list.ftaxRate = Number(this.selectTaxRate)
      })
      this.openSupplier = false
    },
    // 物料弹窗选中
    async materielSelectRow(ev) {
      const item = this.tableData[this.tableIndex]
      item.materielCode = ev.fnumber
      item.fname = ev.fname
      item.fmaterialId = ev.fmaterialId
      item.fmodel = ev.fmodel
      item.fpurchasepriceUnit = ev.fpurchasepriceUnit
      item.funitId = ev.fpurchasepriceUnitId
      item.fdescripTion = ev.fdescripTion
      item.fspecificaTion = ev.fspecificaTion
      this.openMaterialDialog = false
    },
    // 获取价格类型
    async handleGetPriceType() {
      const { data: RES } = await queryViewItem({ viewName: 'SX_PRICETYPE' })
      this.purchaseForm.priceTypeList = RES.list.map(item => {
        const { fname: label, fid: value } = item
        return { label, value }
      })
    },
    // 打开物料编码
    handleGetMateriel(row, index) {
      this.tableIndex = index
      this.openMaterialDialog = true
    },
    // 含税选中
    handleTax() {
      const tableData = this.tableData[this.tableIndex]
      if (this.purchaseForm.fisIncludedTax) {
        // 单价不可输
        this.fpriceDisabled = true
        this.ftaxPriceDisabled = false
        // 上限
        tableData.fupPrice = tableData.ftaxPrice
        // 下限
        tableData.fdownPrice = tableData.ftaxPrice
      } else {
        this.ftaxPriceDisabled = true
        this.fpriceDisabled = false
        // 上限
        tableData.fupPrice = tableData.ftaxPrice
        // 下限
        tableData.fdownPrice = tableData.ftaxPrice
      }
    },
    // 单价
    handleUnitPrice(row) {
      const { fprice, ftaxRate } = row
      // 含税单价
      row.ftaxPrice = fprice * (1 + ftaxRate / 100)
      // // 上限
      row.fupPrice = maxDecimal(row.ftaxPrice)
      // // 下限
      row.fdownPrice = maxDecimal(row.ftaxPrice)
    },
    // 含税单价
    handleTaxIncluded(row) {
      const { ftaxPrice, ftaxRate } = row
      // 单价
      row.fprice = ftaxPrice / (1 + ftaxRate / 100)
      // 上限
      row.fupPrice = maxDecimal(ftaxPrice)
      // 下限
      row.fdownPrice = maxDecimal(ftaxPrice)
    },
    // 税率影响
    handleTaxRate(row) {
      const { fprice, ftaxRate, ftaxPrice } = row
      if (!this.fpriceDisabled) {
        // 含税单价
        row.ftaxPrice = maxDecimal(fprice * (1 + ftaxRate / 100))
        // 价格上限
        row.fupPrice = maxDecimal(ftaxPrice)
        // 价格下限
        row.fdownPrice = maxDecimal(ftaxPrice)
        // row.fupPrice = fupPrice.toFixed(4)
        // row.fdownPrice = fdownPrice.toFixed(4)
      } else {
        // 单价
        row.fprice = maxDecimal(ftaxPrice / (1 + row.ftaxRate / 100))
        // 价格上限
        row.fupPrice = maxDecimal(ftaxPrice)
        // 价格下限
        row.fdownPrice = maxDecimal(ftaxPrice)
        // row.fupPrice = fupPrice.toFixed(4)
        // row.fdownPrice = fdownPrice.toFixed(4)
      }
    },
    // 清空弹窗表单
    emptyForm() {
      this.fname = ''
      this.taxRateName = ''
      this.supplierName = ''
    },
    // 关闭物料弹窗
    closeDialogForm() {
      this.FNUMBER = ''
      this.FDESCRIPTION = ''
      this.FSPECIFICATION = ''
      Object.keys(this.searCollData).forEach(key => {
        this.searCollData[key] = ''
      })
    },
    // 刷新
    refresh() {
      this.purchaseForm = {
        priceTypeList: [], // 价格类型
        fpriceType: 151, // 价格类型值
        fcurrencyId: '', // 币别id
        fpaezBase: '', // 供应商税率id
        fpaezBaseName: '', // 供应商税率
        fsupplierId: '', // 供应商
        fsupplierName: '', // 供应商名称
        fcurrencyFname: '', // 币别名称
        code: '', // 编码
        fname: '', // 名称
        fisIncludedTax: true, // 含税
        fdescripTion: '' // 描述
      }
      this.tableData = [
        {
          fnote: '',
          materielCode: '', // 物料编码
          fprice: 0, // 单价
          ftaxPrice: 0, // 含税单价
          fminNum: 1, // 最小起订量
          fupPrice: 0, // 价格上限
          fdownPrice: 0, // 价格下限
          feffectiveDate: new Date(), // 生效时间
          fexpiryDate: '2100-01-01', // 失效时间
          ftaxRate: 0, // 税率
          fdescripTion: '', // 描述
          fmaterialId: '' // 传递给后端的id
        }
      ]
    },
    // 删除行数据
    handleDelete(item, index) {
      this.tableData.splice(index, 1)
    },
    // 新增行
    newHang() {
      this.tableData.push({
        fnote: '',
        materielCode: '', // 物料编码
        fprice: 0, // 单价
        ftaxPrice: 0, // 含税单价
        fminNum: 1, // 最小起订量
        fupPrice: 0, // 价格上限
        fdownPrice: 0, // 价格下限
        feffectiveDate: new Date(), // 生效时间
        fexpiryDate: '2100-01-01', // 生效时间
        ftaxRate: this.selectTaxRate, // 税率
        fdescripTion: '', // 描述
        fmodel: '', // 物料规格
        funit: '' // 计价单位
      })
    },
    // 单击行
    rowClick(row) {
      this.indexSelf = row.index
    },
    // 点击单元格
    cellClick(row, column, cell, event) {
      this.property = column.property
      this.subscript = row.index
    },
    // 批量填充
    batchFill() {
      const item = this.tableData[this.subscript][this.property]
      this.tableData.map((res, index) => {
        if (index >= this.subscript) {
          res[this.property] = item
          if (this.property === 'fprice') {
            this.handleUnitPrice(res)
          } else if (this.property === 'ftaxPrice') {
            this.handleTaxIncluded(res)
          }
        }
      })
    },
    // 删除行
    delHang() {
      this.tableData.splice(this.indexSelf, 1)
    }
  }
}
</script>

<style scoped lang="scss">
.createPurchasePrice {
  @include listBom;
  .tabPosit {
    padding: 5px;
    box-shadow: 0 0 2px #aaa;
    position: absolute;
    top: 3.5vh;
    left: 0;
    background-color: rgba(255, 255, 255, 1);
    z-index: 99999!important;
  }
  .tabPosit1 {
    padding: 5px;
    box-shadow: 0 0 2px #aaa;
    position: absolute;
    top: -25.69vh;
    left:0;
    background-color: rgba(255, 255, 255, 1);
    z-index: 9999;
  }
  padding: 10px;
  display: flex;
  flex-direction: column;

  .header {
    margin-bottom: 10px;
  }
  .el-input::v-deep .el-input__inner {
    height: 30px;
    line-height: 30px;
  }
  .el-form {
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 20%;
      min-width: 12.376vw;
      margin-bottom: 3px;
      .input-width {
        min-width: 7.176vw !important;
      }
    }
  }
}

.el-input__icon {
  cursor: pointer;
}

.icon-jin-rud-ao-bo {
  cursor: pointer;

  &:hover {
    color: #409eff;
  }
}

.materiel-form {
  display: flex;
  align-items: center;
  flex-direction: row;
  margin-bottom: 15px!important;
  position: relative;

  .btn {
    transform: translateY(18%);
    margin-left: 450px !important;
  }

  .confirm {
    transform: translateY(18%);
  }

  .materiel-code {
    font-weight: bold;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
  }

  .input-width {
    width: 185px;
    margin-right: 10px;
  }
}
</style>
